<template>
  <scroll-view
    class="indexView"
    :scroll-y="true"
    :lower-threshold="100"
    :enable-back-to-top="true"
    @scrolltolower="onScrolltolower"
  >
    <NavigationBar
      v-model:inputValue="searchInputValue"
      :inputDisabled="false"
      leftContent="icon"
      @inputConfirm="searchConfirm"
    ></NavigationBar>
    <view class="scrollView">
      <IndexTabs type="search"></IndexTabs>
      <IndexSearch></IndexSearch>
      <IndexList ref="IndexListRef"></IndexList>
      <uv-gap height="50rpx"></uv-gap>
    </view>
  </scroll-view>
</template>

<script setup>
import NavigationBar from "/components/NavigationBar/index.vue";
import IndexTabs from "/components/IndexTabs/index.vue";
import IndexSearch from "/components/IndexSearch/index.vue";
import IndexList from "/components/IndexList/index.vue";
import { ref } from "vue";

import articleManagement from "/api/articleManagement.js";

const searchInputValue = ref("");
const IndexLIstData = ref([]);
const IndexListRef = ref(null);
const onScrolltolower = () => {
  IndexListRef.value.onReachBottom();
};

const getList = () => {
  articleManagement
    .gteArticleListToSearch(searchInputValue.value || "")
    .then((res) => {
      console.log("list", res);
    });
};

const searchConfirm = () => {
  getList();
};
</script>

<style lang="scss">
page {
  height: 100vh;
}

.indexView {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.scrollView {
  flex: 1;
}
</style>
